import React, {Component} from 'react'
import SSCBall from "../../BallStyle/SSCBall"

export default class Base extends Component {
  constructor (props){
   super(props)
   this.state= {
   }
}
  order(item){
    this.props.order(item)
  }

  spliceNum(content){
    var arr = [];
    var arr2 = [];
    content.map(item=>{
      !isNaN(item.number) ? arr.push(item) : arr2.push(item)
    })
    return [arr,arr2]
  }
   render() {
    const {content,select} = this.props
    
   return <div className="peilv">
              {
                 this.spliceNum(content)[0].length>0 &&  <div className="num">
                        {this.spliceNum(content)[0].map((item,index)=>{
                          return <li key={index} onClick={()=>{
                                this.order(item)
                          }}
                          className={select[item.id] ? "selected" : ""}
                          >
                        {isNaN(item.number*1) ? <span className={"noball "+item.id}>{item.number}</span> :
                          <SSCBall num={item.number*1}></SSCBall>}
                          <p className="red">{item.pl}</p></li>
                      
                        })}
                </div>
              }
              {
                  this.spliceNum(content)[1].length>0 &&  <div className="wenzi">
                  {this.spliceNum(content)[1].map((item,index)=>{
                    return <li key={index} onClick={()=>{
                          this.order(item)
                    }}
                    className={select[item.id] ? "selected" : ""}
                    >
                  {isNaN(item.number*1) ? <span className={"noball "+item.id}>{item.number}</span> :
                    <SSCBall num={item.number*1}></SSCBall>}
                    <p className="red">{item.pl}</p></li>
                
                  })}
             </div>
              }
        </div>
   }
}